<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>嵌套组件</title>

    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>

    <!-- 
       
     -->

    <!-- 准备好一个容器 -->
    <div id="root">

        <!-- 第三步 编写组件标签 -->
        <!-- <app></app> -->

    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false // 阻止 vue在启动时生成生产提示    

        // 第一步 创建组件
        const student = Vue.extend({
            template:`
                <div>
                    <h2>学生名字:{{name}}</h2>
                    <h2>年龄:{{age}}</h2>    
                </div>   
            `,
            data(){
                return{
                    name:'徐亚远',
                    age:10
                }
            }
        })

        // 第一步 创建组件
        const school = Vue.extend({
            template:`
                <div>
                    <h2>学校名称:{{schoolName}}</h2>
                    <h2>学校地址:{{address}}</h2>
                    <student></student>    
                </div>
            `,
            // 注册组件 局部组件
            components:{
                student:student
            },
            data(){
                return{
                    schoolName:'宋营小学',
                    address:'河南省商丘市睢阳区路河乡'
                }
            }
        })
        // 第一步 创建组件
        const hello = Vue.extend({
            template:`
                <div>
                    <h2>你好啊！:{{msg}}</h2>
                </div>
            `,
            data(){
                return{
                    msg:'欢迎学习组件的嵌套使用'
                }
            }
        })
        const app = Vue.extend({
            template:`
                <div>
                    <hello></hello>
                    <school></school>    
                </div>

            `,
            components:{
                hello,
                school,
            }
        })

        new Vue({
            template:`<app></app>`,
            el:'#root',
            // 第二步 注册组件
            components: {
                app:app,
            }
        })
        
    </script>


</body>

</html>